﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">

<head>
  <meta charset="UTF-8"/>
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"/>
</head>

<body class="theme-teal">

<th:block th:fragment="core-css">
  <!-- Favicon-->
  <link rel="icon" th:href="@{/static/favicon.ico}" type="image/x-icon"/>

  <!-- Google Fonts -->
  <link th:href="@{/webjars/material-design-icons/material-icons.css}" rel="stylesheet"/>

  <!-- Bootstrap Core Css -->
  <link th:href="@{/webjars/bootstrap/css/bootstrap.css}" rel="stylesheet"/>

  <link th:href="@{/webjars/animate.css/animate.css}" rel="stylesheet"/>

  <!-- Waves Effect Css -->
  <link th:href="@{/webjars/waves/dist/waves.css}" rel="stylesheet"/>

</th:block>

<th:block th:fragment="app-css">
  <link th:href="@{/static/css/style.css}" rel="stylesheet"/>
  <link th:href="@{/static/css/themes/all-themes.css}" rel="stylesheet"/>
  <script th:inline="javascript">
      var MCloud = {
          current: location.pathname.replace(/\/(form|create|edit|([0-9]+))*$/, ""),
          context: /*[[@{/}]]*/''
      };
  </script>
</th:block>

<th:block th:fragment="app-js">
  <script th:src="@{/static/js/app.js}"></script>
  <script th:src="@{/static/js/admin.js}"></script>
  <script th:src="@{/static/js/mcloud/mcloud.rest.js}"></script>
</th:block>

<th:block th:fragment="common-div">
  <!-- Page Loader -->
  <div class="page-loader-wrapper">
    <div class="loader">
      <div class="preloader">
        <div class="spinner-layer pl-red">
          <div class="circle-clipper left">
            <div class="circle"></div>
          </div>
          <div class="circle-clipper right">
            <div class="circle"></div>
          </div>
        </div>
      </div>
      <p>Please wait...</p>
    </div>
  </div>
  <!-- #END# Page Loader -->
  <!-- Overlay For Sidebars -->
  <div class="overlay"></div>
  <!-- #END# Overlay For Sidebars -->
  <!--Logout Form-->
  <form th:action="@{/logout}" method="post" id="logout-form"></form>
  <!--#END# Logout Form-->
</th:block>

<th:block th:fragment="search-bar">
  <!-- Search Bar -->
  <div class="search-bar">
    <div class="search-icon">
      <i class="material-icons">search</i>
    </div>
    <input type="text" placeholder="START TYPING...">
    <div class="close-search">
      <i class="material-icons">close</i>
    </div>
  </div>
  <!-- #END# Search Bar -->
</th:block>
<th:block th:fragment="top-bar">
  <!-- Top Bar -->
  <nav class="navbar">
    <div class="container-fluid">
      <div class="navbar-header">
        <a href="javascript:void(0);" class="navbar-toggle collapsed" data-toggle="collapse"
           data-target="#navbar-collapse" aria-expanded="false"></a>
        <a href="javascript:void(0);" class="bars"></a>
        <a class="navbar-brand" th:href="@{/admin/dashboard}">MCloud - OAuth2 Server</a>
      </div>
      <div class="collapse navbar-collapse" id="navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
          <!-- Call Search -->
          <li><a href="javascript:void(0);" class="js-search" data-close="true"><i class="material-icons">search</i></a>
          </li>
          <!-- #END# Call Search -->
          <!-- Notifications -->
          <li class="dropdown">
            <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button">
              <i class="material-icons">notifications</i>
              <span class="label-count">1</span>
            </a>
            <ul class="dropdown-menu">
              <li class="header">NOTIFICATIONS</li>
              <li class="body">
                <ul class="menu">
                  <li>
                    <a href="javascript:void(0);">
                      <div class="icon-circle bg-light-green">
                        <i class="material-icons">person_add</i>
                      </div>
                      <div class="menu-info">
                        <h4>12 new members joined</h4>
                        <p>
                          <i class="material-icons">access_time</i> 14 mins ago
                        </p>
                      </div>
                    </a>
                  </li>
                </ul>
              </li>
              <li class="footer">
                <a href="javascript:void(0);">View All Notifications</a>
              </li>
            </ul>
          </li>
          <!-- #END# Notifications -->
          <!-- Tasks -->
          <li class="dropdown">
            <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button">
              <i class="material-icons">flag</i>
              <span class="label-count">1</span>
            </a>
            <ul class="dropdown-menu">
              <li class="header">TASKS</li>
              <li class="body">
                <ul class="menu tasks">
                  <li>
                    <a href="javascript:void(0);">
                      <h4>
                        Demo
                        <small>32%</small>
                      </h4>
                      <div class="progress">
                        <div class="progress-bar bg-pink" role="progressbar" aria-valuenow="85" aria-valuemin="0"
                             aria-valuemax="100" style="width: 32%">
                        </div>
                      </div>
                    </a>
                  </li>
                </ul>
              </li>
              <li class="footer">
                <a href="javascript:void(0);">View All Tasks</a>
              </li>
            </ul>
          </li>
          <!-- #END# Tasks -->
          <li class="pull-right"><a href="javascript:void(0);" class="js-right-sidebar" data-close="true"><i
              class="material-icons">more_vert</i></a></li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- #Top Bar -->
</th:block>

<th:block th:fragment="side-bar">
  <section>
    <!-- Left Sidebar -->
    <aside id="leftsidebar" class="sidebar">
      <!-- User Info -->
      <div class="user-info">
        <div class="image">
          <img th:src="@{/static/images/user.png}" width="48" height="48" alt="User"/>
        </div>
        <div class="info-container">
          <div class="name" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">MCloud Admin</div>
          <div class="email"></div>
          <div class="btn-group user-helper-dropdown">
            <i class="material-icons" data-toggle="dropdown" aria-haspopup="true"
               aria-expanded="true">keyboard_arrow_down</i>
            <ul class="dropdown-menu pull-right">
              <li><a href="javascript:void(0);"><i class="material-icons">person</i>Profile</a></li>
              <li role="seperator" class="divider"></li>
              <li><a href="javascript:void(0);" onclick="logout()"><i class="material-icons">input</i>Sign Out</a></li>
            </ul>
          </div>
        </div>
      </div>
      <!-- #User Info -->

      <!--Admin Menu -->
      <div sec:authorize="hasRole('ADMIN')" class="menu">
        <ul class="list">
          <li class="header">DASHBOARD</li>
          <li>
            <a th:href="@{/admin/dashboard}">
              <i class="material-icons">home</i>
              <span>Dashboard</span>
            </a>
          </li>
          <li class="header">SECURITY</li>
          <li>
            <a href="javascript:void(0);" class="menu-toggle">
              <i class="material-icons">person</i>
              <span>User</span>
            </a>
            <ul class="ml-menu">
              <li>
                <a th:href="@{/admin/user/index}">All Users</a>
                <a th:href="@{/admin/user/group}">User Groups</a>
              </li>
            </ul>
          </li>

          <li>
            <a href="javascript:void(0);" class="menu-toggle">
              <i class="material-icons">person</i>
              <span>Developer</span>
            </a>
            <ul class="ml-menu">
              <li>
                <a th:href="@{/admin/dev/index}">All Developers</a>
                <a th:href="@{/admin/dev/pending}">Pending Developers</a>
              </li>
            </ul>
          </li>

          <li>
            <a href="javascript:void(0);" class="menu-toggle">
              <i class="material-icons">security</i>
              <span>OAuth2</span>
            </a>
            <ul class="ml-menu">
              <li>
                <a th:href="@{/admin/oauth2/client}">Clients</a>
                <a th:href="@{/admin/oauth2/resource}">Resources</a>
                <a th:href="@{/admin/oauth2/scope}">Scopes</a>
                <a th:href="@{/admin/oauth2/authority}">Authorities</a>
              </li>
            </ul>
          </li>

        </ul>
      </div>
      <!-- #End Admin Menu -->

      <!--Developer Menu -->
      <div sec:authorize="hasRole('DEVELOPER')" class="menu">
        <ul class="list">
          <li class="header">DASHBOARD</li>
          <li>
            <a th:href="@{/console/dashboard}">
              <i class="material-icons">home</i>
              <span>Dashboard</span>
            </a>
          </li>
          <li class="header">BASIC</li>
          <li>
            <a th:href="@{/console/dev/info}">
              <i class="material-icons">person</i>
              <span>Basic Information</span>
            </a>
          </li>
        </ul>
      </div>
      <!-- #End User Menu -->

      <!-- Footer -->
      <div class="legal">
        <div class="copyright">
          &copy; 2017 <a href="https://github.com/heyuxian/mcloud-oauth2-server">MCloud-OAuth2 Server</a>.
        </div>
      </div>
      <!-- #Footer -->
    </aside>
    <!-- #END# Left Sidebar -->
    <!-- Right Sidebar -->
    <aside id="rightsidebar" class="right-sidebar">
      <ul class="nav nav-tabs tab-nav-right" role="tablist">
        <li role="presentation" class="active"><a href="#skins" data-toggle="tab">SKINS</a></li>
        <li role="presentation"><a href="#settings" data-toggle="tab">SETTINGS</a></li>
      </ul>
      <div class="tab-content">
        <div role="tabpanel" class="tab-pane fade in active in active" id="skins">
          <ul class="demo-choose-skin">
            <li data-theme="red">
              <div class="red"></div>
              <span>Red</span>
            </li>
            <li data-theme="pink">
              <div class="pink"></div>
              <span>Pink</span>
            </li>
            <li data-theme="purple">
              <div class="purple"></div>
              <span>Purple</span>
            </li>
            <li data-theme="deep-purple">
              <div class="deep-purple"></div>
              <span>Deep Purple</span>
            </li>
            <li data-theme="indigo">
              <div class="indigo"></div>
              <span>Indigo</span>
            </li>
            <li data-theme="blue">
              <div class="blue"></div>
              <span>Blue</span>
            </li>
            <li data-theme="light-blue">
              <div class="light-blue"></div>
              <span>Light Blue</span>
            </li>
            <li data-theme="cyan">
              <div class="cyan"></div>
              <span>Cyan</span>
            </li>
            <li data-theme="teal" class="active">
              <div class="teal"></div>
              <span>Teal</span>
            </li>
            <li data-theme="green">
              <div class="green"></div>
              <span>Green</span>
            </li>
            <li data-theme="light-green">
              <div class="light-green"></div>
              <span>Light Green</span>
            </li>
            <li data-theme="lime">
              <div class="lime"></div>
              <span>Lime</span>
            </li>
            <li data-theme="yellow">
              <div class="yellow"></div>
              <span>Yellow</span>
            </li>
            <li data-theme="amber">
              <div class="amber"></div>
              <span>Amber</span>
            </li>
            <li data-theme="orange">
              <div class="orange"></div>
              <span>Orange</span>
            </li>
            <li data-theme="deep-orange">
              <div class="deep-orange"></div>
              <span>Deep Orange</span>
            </li>
            <li data-theme="brown">
              <div class="brown"></div>
              <span>Brown</span>
            </li>
            <li data-theme="grey">
              <div class="grey"></div>
              <span>Grey</span>
            </li>
            <li data-theme="blue-grey">
              <div class="blue-grey"></div>
              <span>Blue Grey</span>
            </li>
            <li data-theme="black">
              <div class="black"></div>
              <span>Black</span>
            </li>
          </ul>
        </div>
        <div role="tabpanel" class="tab-pane fade" id="settings">
          <div class="demo-settings">
            <p>GENERAL SETTINGS</p>
            <ul class="setting-list">
              <li>
                <span>Report Panel Usage</span>
                <div class="switch">
                  <label><input type="checkbox" checked><span class="lever"></span></label>
                </div>
              </li>
              <li>
                <span>Email Redirect</span>
                <div class="switch">
                  <label><input type="checkbox"><span class="lever"></span></label>
                </div>
              </li>
            </ul>
            <p>SYSTEM SETTINGS</p>
            <ul class="setting-list">
              <li>
                <span>Notifications</span>
                <div class="switch">
                  <label><input type="checkbox" checked><span class="lever"></span></label>
                </div>
              </li>
              <li>
                <span>Auto Updates</span>
                <div class="switch">
                  <label><input type="checkbox" checked><span class="lever"></span></label>
                </div>
              </li>
            </ul>
            <p>ACCOUNT SETTINGS</p>
            <ul class="setting-list">
              <li>
                <span>Offline</span>
                <div class="switch">
                  <label><input type="checkbox"><span class="lever"></span></label>
                </div>
              </li>
              <li>
                <span>Location Permission</span>
                <div class="switch">
                  <label><input type="checkbox" checked><span class="lever"></span></label>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </aside>
    <!-- #END# Right Sidebar -->
  </section>
</th:block>

<section class="content">
  <div class="container-fluid">
    <div class="block-header">
      <h2>BLANK PAGE</h2>
    </div>
  </div>
</section>

<th:block th:fragment="core-js">
  <!-- Jquery Core Js -->
  <script th:src="@{/webjars/jquery/1.12.4/jquery.min.js}"></script>
  <!-- Bootstrap Core Js -->
  <script th:src="@{/webjars/bootstrap/js/bootstrap.js}"></script>
  <!-- Slimscroll Plugin Js -->
  <script th:src="@{/webjars/jQuery-slimScroll/jquery.slimscroll.js}"></script>
  <!-- Waves Effect Plugin Js -->
  <script th:src="@{/webjars/waves/dist/waves.js}"></script>
  <script th:src="@{/webjars/sweetalert/docs/assets/sweetalert/sweetalert.min.js}"></script>
</th:block>
</body>

</html>